﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link href="css/bootstrap.css" rel="stylesheet" />
    <link href="css/bootstrap-responsive.css" rel="stylesheet" />
    <script src="js/jquery-1.8.2.js"></script>
    <script src="js/json2.js"></script>
    <script src="js/jquery.dragsort-0.5.1.js"></script>
    <style>
        .table th, .table td  {
            padding:0px;
            margin:0px;
            text-align:initial;
        }
        th {
            text-align:center;
        }
        .seattdbg {
            background-color:darkgrey;
        }

        .table td {
            padding:0px;
            overflow:hidden;
        }
        .table-seat{
            border-bottom:1px solid #dddddd;
        }

        .table tbody + tbody {
            border-top:none;
        }
        .table-header-staff {
            line-height:21px;
            height:21px;
        }
        .body-background-img {
            background:url(/img/tblbgs.jpg) repeat-y;
        }

    </style>
</head>
<body  >
    <div id="showmsg" >0</div>
    <div>
        日期：2013-11-04                      <input type="button" onclick="dosubmit()" value="确定" />
    </div>
    <div style="width:1521px;" >
        <table class="table table-seat" style="cursor:Crosshair;width:1521px;" >
            <tr class="table-header-staff body-background-img" >
                <th style="width:80px;">排班座位</th>
                <th>00:00</th><th>01:00</th><th>02:00</th><th>03:00</th><th>04:00</th>
                <th>05:00</th><th>06:00</th><th>07:00</th><th>08:00</th><th>09:00</th>
                <th>10:00</th><th>11:00</th><th>12:00</th><th>13:00</th><th>14:00</th>
                <th>15:00</th><th>16:00</th><th>17:00</th><th>18:00</th><th>19:00</th>
                <th>20:00</th><th>21:00</th><th>22:00</th><th>23:00</th>
            </tr>
            <tbody id="table-seat-num-body" >

            </tbody>
            <tr>
                <td colspan="25" style="height:30px;" ></td>
            </tr>
        </table>
    </div>
    <div  div-tag="begin" class="div_line_staff" style="width:2px;height:100px; position:absolute; background-color:red;top:0px;left:80px;cursor:e-resize;" ></div>

    <div  div-tag="end" class="div_line_staff" style="width:2px;height:100px; position:absolute; background-color:blue;top:0px;left:105px;cursor:e-resize;" ></div>
    
    <div id="div-seat-template" style="display:none;background-color:darkgrey;filter:alpha(Opacity=80);-moz-opacity:0.8;opacity: 0.8;"><a href="javascript:" style="display:none" onclick="divseattemplatedel(this)">取消</a><div></div></div>
    <script type="text/template" id="table-seat-template" >
        <tr class="body-background-img" ><td class="seatnum" data-id="{hid_seat_id}" style="font-size:10px;">{seat_name}</td>{tdbody}</tr>
    </script>
    <script type="text/template" id="table-seat-body-template" >
        <td colspan="{colspan}" ><div class="div-seat-msg" style="width:{width}%;background-color:{color};margin-left:{mgleft}px;" ><input type="checkbox"/><textarea style="display:none;">{data}</textarea></div></td>
    </script>
    <div id="div-seat-msg-show" style="position:absolute;display:none;top:0px;left:0px;border:1px solid #dddddd;background-color:white;padding:8px;">
    </div>
    <script type="text/template" id="div-seat-msg-data" >
        <ul class="unstyled" ><li>排班工号：{staff_id}</li><li>员工姓名：{staff_name}</li>
            <li>班务：{descr}</li><li>团队：{team_name}</li><li>班组：{group_name}</li><li>小组：{subgroup_name}</li>
        </ul>
    </script>
    <input type="hidden" id="hiddtimestaff" value="" />
<script>
    
    $(document).ready(function () {
        var ops = [];
        ops.table = [{ hid_seat_id: 1, seat_name: "一楼[1号座]" }, { hid_seat_id: 2, seat_name: "一楼[2号座]" }, { hid_seat_id: 3, seat_name: "一楼[3号座]" }, { hid_seat_id: 4, seat_name: "一楼[4号座]" }];
        ops.seat = [{ staff_id: "kb00001", hid_seat_id: 1, staff_name: "曹胡生", hid_staff_info: "", subgroup_name: "", descr: "8:20-13:00", team_name: "", group_name: "", subgroup_name: "", hid_series_color: "yellow" }, { staff_id: "kb00001", hid_seat_id: 1, staff_name: "曹胡生", hid_staff_info: "", subgroup_name: "", descr: "15:00-17:00", team_name: "", group_name: "", subgroup_name: "", hid_series_color: "#546546" }, { staff_id: "kb00001", hid_seat_id: 2, staff_name: "曹胡生", hid_staff_info: "", subgroup_name: "", descr: "0:10-6:00", team_name: "", group_name: "", subgroup_name: "", hid_series_color: "#546546" }, { staff_id: "kb00001", hid_seat_id: 3, staff_name: "曹胡生", hid_staff_info: "", subgroup_name: "", descr: "18:10-23:20", team_name: "", group_name: "", subgroup_name: "", hid_series_color: "#546546" }]
        document.onselectstart = new Function("event.returnValue=false");
        var offsetnum = 80;
        var mousedown = false;
        var sd;
        var seatnumheight = $(".seatnum").height();
        


        bindtable(ops);


        $(".div_line_staff").height($("body").height());
        $(".div_line_staff").mousedown(function () {
            sd = $(this);
            mousedown = true;
            $(document).mousemove(function (e) {
                if (mousedown) {
                    sd.css({ left: movenum(e,sd) });
                }
            });
            $(document).mouseup(function (e) {
                if (mousedown) {
                    mousedown = false;
                }
                var ops = getstaff();
                $("#hiddtimestaff").val(ops.begin + "-" + ops.end);
                //$("#showmsg").html("begin:"+ops.begin + "    end:"+ops.end);
            });
        });
        
        function movenum(e,sd)
        {
            var clientx = e.clientX;
            if (sd != null) {
                if (e.pageX) {
                    clientx = e.pageX;
                } else {
                    clientx=e.clientX + document.body.scrollLeft - document.body.clientLeft
                }
                var sdid = sd.attr("div-tag");
                var oneleft = $(".div_line_staff[div-tag=begin]").offset().left;
                var twoleft = $(".div_line_staff[div-tag=end]").offset().left;
                if (sdid == "begin") {
                    var res = 0;
                    if (clientx + 10 < twoleft) {
                        if (clientx%5==0) {
                            res= clientx;
                        } else {
                            res= parseInt(clientx / 5) * 5;
                        }
                    } else {
                        res= twoleft - 15;
                    }
                    if (res<offsetnum) {
                        res = offsetnum;
                    }
                    return res;
                } else {
                    var res = 0;
                    if (oneleft + 10 < clientx) {
                        if (clientx % 5 == 0) {
                            res= clientx;
                        } else {
                            res= parseInt(clientx / 5) * 5;
                        }
                    } else {
                        res= oneleft + 15;
                    }
                    if (res > 1440 + offsetnum) {
                        res = 1440 + offsetnum;
                    }
                    return res;
                }
            }
        }
        $(".table-header-staff").mousedown(function (e) {
            if (sd!=null) {
                sd.css({ left: movenum(e, sd) });
            }
        });

        function getstaff()
        {
            var oneleft = $(".div_line_staff[div-tag=begin]").offset().left - offsetnum;
            var twoleft = $(".div_line_staff[div-tag=end]").offset().left - offsetnum;
            return { begin: oneleft, end: twoleft };
        }
        var isdown = false;
        var div;
        $(".table-seat").mousedown(function (e) {
            isdown = true;
            div = $("#div-seat-template").clone().appendTo("body");
            div.removeAttr("id");
            div.show();
            var postion=mousXY(e);
            div.css({ left: postion.X, top: postion.Y, position: "absolute" });
            $("#div-seat-msg-show").hide();
        });
        $(".div-seat-msg").mouseover(function (e) {
            if (!isdown) {
                var div = $("#div-seat-msg-show").show();
                var postion = mousXY(e);
                var data = $(this).find("textarea").val();
                div.html($("#div-seat-msg-data").html().filldata(JSON.parse(data)));
                div.css({ top: $(this).offset().top+20, left: $(this).offset().left });
            }
        });
        $(".div-seat-msg").mouseout(function () {
            $("#div-seat-msg-show").hide();
        });
        $("body").mousemove(function (e) {
            if (isdown && div) {
                var divx = div.offset().left;
                var divy = div.offset().top;
                var postion = mousXY(e);
                div.width(postion.X - divx);
                div.height(postion.Y - divy);
            }
        }).mouseup(function () {
            isdown = false;
            if (div) {
                var w = div.width();
                var h = div.height();
                if (w < 5 || h < 5) {
                    div.remove();
                    div = null;
                } else {
                    div.children("a").show();
                    var x = div.offset().left - offsetnum;
                    x = covertozheng(x);
                    var y = div.offset().top;
                    var mx = x + w;
                    var my = y + h;
                    var html = "时间：" + x + " 分钟-" + mx + "分钟 ";
                    html += "座位：";
                    var bg = false;
                    var seatstr = "";
                    $(".seatnum").each(function (i, n) {
                        var ntop = $(n).offset().top;
                        var nh = $(n).height();
                        if (y <= ntop||ntop+nh-y>0) {
                            bg = true;
                        }
                        if (my <= ntop+nh) {
                            bg = false;
                        }
                        if (bg) {
                            var tt = $(n).attr("data-id");
                            html += tt + ",";
                            seatstr += tt + ",";
                        }
                    });
                    html = html.substring(0, html.length - 1);
                    seatstr = seatstr.substring(0, seatstr.length - 1);
                    html += "<textarea class='txtseldata' style='display:none;'>[{descr:'{0}-{1}',seats:'{2}'}]</textarea>".format(x, mx, seatstr);
                    div.children("div").html(html);
                }
            }
        });
        function covertozheng(val)
        {
            if (val%60==0||val%60>5) {
                return val;
            } else if (val % 60 < 5) {
                return val - val % 60;
            }
        }
        function bindtable(data)
        {
            var template = $("#table-seat-template").html();
            var html = "";
            $.each(data.table, function (i, n) {
                var temp = template.filldata(n);
                var td = "";
                for (var j = 0; j < 24;) {
                    var row = getseatrowdatas(data.seat,n,j);
                    if (row) {
                        td += $("#table-seat-body-template").html().filldata(row);
                        j += row.colspan;
                    } else {
                        td += "<td></td>";
                        j++;
                    }
                }
                html += temp.replaceo("tdbody", td);
            });
            $("#table-seat-num-body").html(html);
        }
        function getseatrowdatas(data,n,i) {
            var res=null;
            for (var ii in data) {
                var d = data[ii];
                if (d.hid_seat_id == n.hid_seat_id) {
                    var descr = d.descr.split("-");
                    var bga = descr[0].split(":");
                    var enda = descr[1].split(":");
                    var bg = parseInt(bga[0] * 60) + parseInt(bga[1]);
                    var end = parseInt(enda[0] * 60) + parseInt(enda[1]);
                    var mgleft = bg % 60;
                    var width = end - bg;
                    var kge = 1;
                    if (width % 60 == 0) {
                        kge = width / 60;
                    } else {
                        kge = parseInt(width / 60) + 1;
                    }
                    var ge = parseInt(bg / 60);
                    var color = d.hid_series_color;
                    if (i==ge) {
                        res = { colspan: kge, width: width / (60 * kge) * 100, mgleft: mgleft, color: color, data: JSON.stringify(d) }
                    }
                }
            }
            return res;
        }
    });

    
    function dosubmit()
    {
        //需要换班的数据
        var ndata = "";
        $("input:checked").each(function (i, n) {
            ndata+=$(this).next("textarea").val()+",";
        });
        if (ndata=="") {
            alert("没有选择任何需要交换的排班!");
            return;
        }
        ndata = ndata.substring(0, ndata.length - 1);
        var cdata = "";
        $(".txtseldata").each(function () {
            cdata+=$(this).val()+",";
        });
        if (cdata!="") {
            cdata = cdata.substring(0, cdata.length - 1);
        }
        var staff=$("#hiddtimestaff").val();
        if (cdata == "" && staff == "")
        {
            alert("没有选择任何可以交换的排班!");
            return;
        }
        var valuestr = "[{ndata:[{0}],cdata:[{1}],staff:'{2}'}]".format(ndata, cdata, $("#hiddtimestaff").val());
        alert(valuestr);
        window.showModalDialog("default.aspx", { postdata: valuestr });
        //var postForm = document.createElement("form");//表单对象   
        //postForm.method = "post";
        //postForm.action = 'default.aspx';
        //postForm.target = "openbox";

        //var txtInput = document.createElement("textarea");
        //txtInput.setAttribute("name", "postdata");
        //txtInput.setAttribute("value", valuestr);
        //postForm.appendChild(txtInput);

        //document.body.appendChild(postForm);
        //postForm.submit();
        //document.body.removeChild(postForm);
    }

    function divseattemplatedel(obj)
    {
        $(obj).parent("div").remove();
    }
    function mousXY(e)
    {
        if (e.pageX||e.pageY) {
            return {X:e.pageX,Y:e.pageY};
        }
        var x = e.clientX + document.body.scrollLeft - document.body.clientLeft;
        var y = e.clientY + document.body.scrollTop - document.body.clientTop;
        return {X:x,Y:y};
    }

    String.prototype.filldata = function (data) {
        if (typeof data === "object" && data) {
            return this.replace(/{(.+?)}/g, function (e1, e2) {
                var res = data[e2];
                if (res == undefined || res == null) {
                    return e1;
                } else {
                    return res;
                }
            });
        }
    }
    String.prototype.format = function () {
        var args = arguments;
        return this.replace(/{(\d{1})}/g, function () {
            return args[arguments[1]];
        });
    };
    String.prototype.replaceo = function (key, value) {
        return this.replace("{" + key + "}", value);
    }
</script>
</body>
</html>
